<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tradesmen Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--Bootstrap css file-->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
	
	<div class="container">
	
		<div class="admin-bar">
			<div class="row">
				<div class="span3">
					<div class="logo">
						<a href="index.html"><img src="http://placehold.it/280x100"/></a>
					</div>
				</div>
				<div class="span7">
					<form class="well form-search">
						<input type="text" class="input-xlarge search-query" placeholder="Search for tradesman..." />
						<input type="text" class="input-large search-query" placeholder="Town/City or Postcode" />
						<a type="submit" class="btn btn-primary main-search-button" href="search.html">Search</a>
					</form>
				</div>
				<div class="span2">
					<div class="admin-buttons well">
						<div class="btn-group">
							<button class="btn account-button">My Account</button>
							<button class="btn dropdown-toggle" data-toggle="dropdown">
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a class="#" data-toggle="modal" href="#myModal" >Log In</a></li>
								<li><a href="#">Settings</a></li>
								<li class="divider"><li>
								<li><a href="#">Log Out</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<nav>
			<div class="row">
				<div class="span12">
					<div class="navbar">
						<div class="navbar-inner">
							<a class="btn btn-navbar " data-toggle="collapse" data-target=".nav-collapse">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</a>
							<a class="btn btn-navbar home-button" href="index.html"><i class="icon-home icon-white"></i></a>
							<div class="nav-collapse">
								<ul class="nav">
									<li><a href="index.html"><i class="icon-home icon-white"></i> Home</a></li>
									<li class="divider-vertical"></li>
									<li><a href="howitworks.html"><i class="icon-wrench icon-white"></i> How it Works</a></li>
									<li class="divider-vertical"></li>
									<li><a href="directory.html"><i class="icon-book icon-white"></i> Trade Directory</a></li>
									<li class="divider-vertical"></li>
									<li><a href="review.html"><i class="icon-pencil icon-white"></i> Leave a Review</a></li>
									<li class="divider-vertical"></li>
									<li><a href="contact.html"><i class="icon-envelope icon-white"></i> Contact Us</a></li>
									<li class="divider-vertical"></li>
									<div class="navbar-search pull-right">
										<input type="text" class="search-query" placeholder="Search">
									</div>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</nav>

		<div class="carousel hidden-phone">
			<div class="row">
				<div class="span12">
					<!--Carousel-->
					<div id="myCarousel" class="carousel slide">
						<div class="carousel-inner">
							<div class="active item"><img src="http://placehold.it/1170x280" /></div>
							<div class="item"><img src="http://placehold.it/1170x280" /></div>
							<div class="item"><img src="http://placehold.it/1170x280" /></div>
						</div>
						<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
						<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
					</div>
				</div>
			</div>
		</div>
			
		<!--Main Content-->
		<section>
			<div class="row">
				<div class="span8">
					<div class="well">
						<h3>Why you can trust our tradesmen..</h3><br/>
					</div>
				</div>
				<!--aside-->
				<aside>
					<div class="span4"> 
						<div class="well">
							<h3>Benefits you'll receive when you sign up as a tradesmen..</h3><br/>
							<ul>
								<li>A company profile - List all your company details, with direct contact links</li><br/>
								<li>Free image upload - Upload up to 8 images of previous work on to your company profile</li><br/>
								<li>No commission - We wont charge you a penny for successful job leads</li><br/>
								<li>Exclusive yearly membership - choose a yearly membership and pay nothing for the first 2 months</li><br/>
								<li>Discount for recommendations - for every tradesperson you get to sign up we'll give you 10% of your registration fee back</li><br/>
							</ul>
						</div>
					</div>
				</aside>
			</div>
		</section>
		
		<hr>
			
	</div>	
	<!--Container-->
	
	<footer>
		<div class="container">
			<div class="row">
				<div class="span12">
					<div class="footer-links span3">
						<h4>Services</h4>
						<ul class="unstyled">								
							<li><a class="#" data-toggle="modal" href="#myModal2">FAQ's</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal3">Why Choose Us?</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal1">Registration Fees</a></li>
						</ul>
					</div>
					<div class="footer-links span3">
						<h4>More</h4>
						<ul class="unstyled">
							<li><a href="register.html">Sign Up</a></li>
							<li><a href="news.html">Latest News</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal4">Special Offers</a></li>
						</ul>
					</div>
					<div class="footer-links span3">
						<h4>Company</h4>
						<ul class="unstyled">
							<li><a href="contact.html">Contact Us</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal5">Privacy Policy</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal6">Terms & Conditions</a></li>
						</ul>
					</div>
					<div class="footer-links span2">
						<h4>Stay in touch</h4>
						<ul class="unstyled">
							<li><a class="twitter" href="#">Twitter</a></li>
							<li><a class="facebook" href="#">Facebook</a></li>
							<li><a class="google" href="#">Flickr</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<div class="footer-floor">
		<div class="container">
			<div class="row">
				<div class="footer-copyright">
					<div class="span2">
						<p></p>
					</div>
					<div class="span8">
						<p>&copy; Tradesmen-site.co.uk 2012. All Rights Reserved.</p>
					</div>
					<div class="span2">
						<a>Who built this website?</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!--Login modal-->
	<div class="modal fade hide login-modal" id="myModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Log in to (Website Name)</h3>
		</div>
		<div class="modal-body login-body">
			<div class="form-input form-inline">
				<label class="form-input-label">Username/Email:</label>
				<input type="text" class="input span3">
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label">Password:</label>
				<input type="text" class="input span3">
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label"></label>
				<label class="checkbox ">
					<input type="checkbox"> Remember me on this computer
				</label>
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label"></label>
				<a href="#" class="">Forgot your password?</a>
			</div>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary">Log In</a>
			<a href="#" class="btn" data-dismiss="modal">Close</a>
		</div>
	</div>
	
	<!--Subscription modal-->
	<div class="modal fade hide" id="myModal1">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Subscription Fees</h3>
		</div>
		<div class="modal-body">
			<div class="subscription">
				<h4>Yearly Subscription</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div><br/>
			<div class="subscription">
				<h4>Monthly Subscription</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div><br/>
		</div>
		<div class="modal-footer">
			<a href="register.html" class="btn btn-primary">Register</a>
		</div>
	</div>
	
	<!--FAQ modal-->
	<div class="modal fade hide" id="myModal2">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>FAQ's</h3>
		</div>
		<div class="modal-body">
			<div class="tabbable">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab1" data-toggle="tab">Customers</a></li>
					<li><a href="#tab2" data-toggle="tab">Trademen</a></li>
					<li><a href="#tab3" data-toggle="tab">General</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab1">
						<div class="faq">
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Q. How does (website name) work?</a>
								</div>
								<div id="collapseOne" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>Unlike many of the other tradesmen websites out there who do not provide a directory of trades people, we offer you, the consumers a large directory of professionals to do your job. Our thorough monitoring of listed tradesmen ensures high standards are maintained and consumers stay happy. </p>									
									</div>
								</div>
							</div>		
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseaTwo">Q. Why do I need to register to leave a review?</a>
								</div>
								<div id="collapseTwo" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>The reason we require you, the consumer to register before leaving a review is so that we can contact you in the case of a bad review. This allows us to verify the story and resolve the issue gracefully.</p>									
									</div>
								</div>
							</div>	
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. What happens if I am not happy with the service I have received?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>The first thing you should do is directly contact the tradesman to try and resolve any issues between you and the trades person. If your issues can't be resolved, then call our office and we will send you a copy of our complaints form via email or post. In serious cases, we send out independent specialists to review the work carried out. Unsuitable work will lead to a trader being de-listed from our website.</p>
									</div>
								</div>
							</div>	
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. As a consumer how much does it cost to use (website name) ?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>Nothing! (website name) is a free online trade directory that you can rely on to provide you with only the best local trades people. You can use this service as many times as you like to find as many different trades people as you wish, and contact them to see what they can do for you.</p>	
									</div>
								</div>
							</div>		
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. How do I make a selection?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>Simple, as we've done the difficult part by ensuring all our traders are of the highest standards. The only thing left for you to do is review their profiles, qualifications, images of previous work, and most importantly the reviews they've recieved from other consumers</p>		
									</div>
								</div>
							</div>	
						</div>
					</div>
					<div class="tab-pane" id="tab2">
						<div class="faq">
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. How can I sign up as a trader?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>Simple, as we've done the difficult part by ensuring all our traders are of the highest standards. The only thing left for you to do is review their profiles, qualifications, images of previous work, and most importantly the reviews they've recieved from other consumers</p>		
									</div>
								</div>
							</div>	
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. What happens if I get a bad review?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>If a customer gives feedback under 60%, automatic investigation is initiated, and the feedback is sent directly to our Administration Team. This means that we contact you and the customer first to find out what the issues were. If it is deemed suitable that a poor reference is left, then we let the future customers on (website name) know, because we have checked that it is reliable customer feedback.</p>									
									</div>
								</div>
							</div>	
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. How do I change my profile details</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>Simple all you have to do is login to your account and edit the details, add and remove images or previous work, add and remove qualifications etc. If you have any trouble, feel free to call our Administration Team on (website name)</p>
									</div>
								</div>
							</div>	
						</div>
					</div>
					<div class="tab-pane" id="tab3">
						<div class="faq">
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. How long has (website name) been around?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>(website name) was founded in the early part of 2012 and has been operating now for the last 12 months, helping you get your jobs done.</p>						
									</div>
								</div>
							</div>	
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. How many tradesmen are currently listed on (website name)?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>At present we have a directory of (number) trades people in over 25 different trades, the number of tradesmen listing themselves on (website name) growing everyday.</p>						
									</div>
								</div>
							</div>	
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. Are membership numbers limited on (website name)?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>Membership is not limited on (website name) any tradesperson looking to sign up can come directly to us and register either by telephone or online.</p>					
									</div>
								</div>
							</div>	
							<div class="accordion" id="accordion2">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Q. There are other online trade directories why should I chose you?</a>
								</div>
								<div id="collapseThree" class="accordion-body collapse">
									<div class="accordion-inner">
										<p>Unlike other online trade directories who list all types of tradesmen, we specialise in providing you with a directory of honest local sole traders who have extensive experience in their fields. All of our tradesmen provide us with qualifications and proof of insurance.</p>
									</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>	
		</div>
		<div class="faq-footer modal-footer">
			<p>If you have any other questions regarding (website name) give us a call on ...... From 9am to 5pm Monday-Friday. We would be more than happy to answer any additional questions you have.</p>
		</div>
	</div>	
	
	<!--Why us modal-->
	<div class="modal fade hide" id="myModal3">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Why Choose Us?</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Special Offers modal-->
	<div class="modal fade hide" id="myModal4">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Special Offers</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Privacy policy modal-->
	<div class="modal fade hide" id="myModal5">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Privacy Policy</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Terms & Condtions modal-->
	<div class="modal fade hide" id="myModal6">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Terms & Conditions</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>		
	
    <!--Bootstrap js files-->
    <script src="js/application.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
	< <script type="text/javascript">
		$(".collapse").collapse()
	</script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

</body>
</html>
